import React, { FC, useState } from "react";
import { NavLink } from "react-router-dom";
import RouteView from "../router/RouteView";
import RouterView from "../router/RouteView";
import { RoutesItem } from '../utils/index'


//antd
import { Button } from 'antd';
//loge
const imgd = require("../images/wipi-logo.png");
//一级路由页面



interface Myprops {
  routes: Array<RoutesItem>
}



const Home: FC<Myprops> = (props) => {
  let [onecolor, setone] = useState(false)
  let [twocolor, settwo] = useState(false)
  let [threecolor, setthree] = useState(false)
  let [btncolor, setbtn] = useState(false)



  let { routes } = props
  return (
    <div className="home">
      <div className="head">
        <div className="myhead">
          <div className="lef">
            <img src={imgd} alt="" />
          </div>
          <div className="rig">
            <ul>
              {
                routes.filter(item => item.name).map((item, index) => {
                  return <li key={index} >
                    <NavLink to={item.path || ''}>
                      {item.name}
                    </NavLink>
                  </li>
                })
              }
            </ul>

            <ol>
              <li>
                <svg
                  onMouseMove={() => {
                    setone(true)
                  }}
                  onMouseOut={() => {
                    setone(false)
                  }}
                  className="icon1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8180" width="32" height="32">
                  <path fill={onecolor ? "red" : ""} d="M364.89999999 121.7zM451 739.10000001L227.60000001 739.10000001l-61.4 189.09999999L98.3 928.2l204.60000001-599.10000002 74.49999999 1e-8 205.4 599.10000001-72 0L451 739.10000001z m-17.10000001-53.20000002l-31.09999999-97.39999998c-22.90000002-67.90000001-41.70000001-132.6-62.2-203.00000002l-3.30000001 0c-19.6 71.2-39.30000001 135.10000001-61.4 203.00000002l-31.09999999 97.39999998 189.10000002 0zM861.4 198.4c-19.70000001 56-47.10000001 101.30000001-82 138.40000001 39.70000001 32.30000001 87.90000001 56.4 145.10000001 70.5-7.8 7.4-17.8 21.90000001-23.40000002 31.89999999-59-16-108.4-42.30000001-148.39999998-77.2-41.2 34.90000002-91.70000001 60.90000001-151.80000002 79.4-4.10000001-8.90000001-14.50000001-24.9-21.49999999-33 59.7-16 108.4-39.00000001 147.70000001-71.2-36-38.2-63.50000001-84.6-84.20000002-138.8l-57.09999999 0L585.8 165l160.70000001 0c-4.50000001-15.2-14.8-38.6-24.90000001-56L758 98.2c10.8 17.4 22.6 41.2 27.50000001 56.4l-33.00000002 10.4L919 165l0 33.4-57.6 0z m-182.50000001 0c17.8 43.8 42.70000001 82 74.20000002 114.70000001 30.10000001-31.2 53.10000001-69 69.8-114.70000001l-144 0z" p-id="8181"></path></svg>
              </li>
              <li>
                <svg onMouseMove={() => {
                  settwo(true)
                }}
                  onMouseOut={() => {
                    settwo(false)
                  }} className="icon2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10172" width="32" height="32"><path fill={twocolor ? "red" : ""} d="M298.7 676.2l-52.3 52.3c-9.6 9.6-9.6 25.3 0 34.9 9.6 9.6 25.3 9.6 34.9 0l52.3-52.3c9.6-9.6 9.6-25.3 0-34.9-9.6-9.6-25.3-9.6-34.9 0z m-15-372.7c9.7 9.7 25.5 9.7 35.2 0 9.7-9.7 9.7-25.5 0-35.2l-52.8-52.8c-9.7-9.7-25.5-9.7-35.2 0-9.7 9.7-9.7 25.5 0 35.2l52.8 52.8z m-69.9 168.8h-74.7c-13.8 0-24.9 11.1-24.9 24.9 0 13.8 11.2 24.9 24.9 24.9h74.7c13.8 0 24.9-11.1 24.9-24.9 0-13.7-11.2-24.9-24.9-24.9z m298.8-249c13.8 0 24.9-11.1 24.9-24.9v-74.7c0-13.8-11.1-24.9-24.9-24.9s-24.9 11.1-24.9 24.9v74.7c0 13.8 11.2 24.9 24.9 24.9z m239.6 69.2l52.3-52.3c9.6-9.6 9.6-25.3 0-34.9-9.6-9.6-25.3-9.6-34.9 0l-52.3 52.3c-9.6 9.6-9.6 25.3 0 34.9 9.6 9.7 25.3 9.7 34.9 0z m133.9 179.8h-74.7c-13.8 0-24.9 11.1-24.9 24.9 0 13.8 11.1 24.9 24.9 24.9h74.7c13.8 0 24.9-11.1 24.9-24.9 0-13.7-11.1-24.9-24.9-24.9zM741.5 690.9c-9.7-9.7-25.5-9.7-35.2 0-9.7 9.7-9.7 25.5 0 35.2l52.8 52.8c9.7 9.7 25.5 9.7 35.2 0 9.7-9.7 9.7-25.5 0-35.2l-52.8-52.8zM512.6 273c-123.9 0-224.3 100.4-224.3 224.3s100.4 224.3 224.3 224.3 224.3-100.4 224.3-224.3S636.5 273 512.6 273z m0 498.1c-13.8 0-24.9 11.1-24.9 24.9v74.7c0 13.8 11.1 24.9 24.9 24.9s24.9-11.1 24.9-24.9V796c0-13.7-11.1-24.9-24.9-24.9z" p-id="10173"></path></svg>
              </li>
              <li>
                <svg onMouseMove={() => {
                  setthree(true)
                }}
                  onMouseOut={() => {
                    setthree(false)
                  }} className="icon3" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11149" width="32" height="32"><path fill={threecolor ? "red" : ""} d="M469.333333 85.333333a384 384 0 0 1 300.032 623.658667l139.306667 139.349333a42.666667 42.666667 0 1 1-60.330667 60.330667l-139.349333-139.306667A384 384 0 1 1 469.333333 85.333333z m0 85.333334a298.666667 298.666667 0 1 0 0 597.333333 298.666667 298.666667 0 0 0 0-597.333333z" p-id="11150"></path></svg>
              </li>
              <li>
                <Button onMouseMove={() => {
                  setbtn(true)
                }}
                  onMouseOut={() => {
                    setbtn(false)
                  }} style={{ color: btncolor ? "red" : "", border: btncolor ? "red" : "" }}>登 录</Button>
              </li>
            </ol>
          </div>
        </div>
      </div>

      <div className="body">
        <RouteView routes={routes}></RouteView>
        <RouterView routes={routes}></RouterView>
      </div>
    </div>
  )
}

export default Home;




